<template>
<ul>
      <li>

        <div
          :class="{bold: isFolder}"
          @dblclick="makeFolder">
          <Radio :label="item.id" disabled>-</Radio>
          <span @click="$emit('ck-item', item)">{{ item.name }}</span>
          <span v-if="isFolder" @click="toggle" class="arrow">{{ isOpen ? '∨' : '＜' }}</span>
        </div>
        <!-- <ul v-show="isOpen" v-if="isFolder"> -->
        <ul v-show="isOpen" v-if="isFolder">
          <tree-item
            class="item"
            v-for="(child, index) in item.children"
            :key="index"
            :item="child"
            @make-folder="$emit('make-folder', $event)"
            @add-item="$emit('add-item', $event)"
            @ck-item="$emit('ck-item', $event)"
          ></tree-item>
          <li class="add" @click="$emit('add-item', item)">+</li>
        </ul>
      </li>
</ul>
</template>
<script>
export default {
  name: "TreeItem",
  props: {
    item: Object
  },
  data: function() {
    return {
      isOpen: true,
    };
  },
  computed: {
    isFolder: function() {
      return this.item.children && this.item.children.length;
    }
  },
  methods: {
    toggle: function() {
      if (this.isFolder) {
        this.isOpen = !this.isOpen;
      }
    },
    makeFolder: function() {
      if (!this.isFolder) {
        this.$emit("make-folder", this.item);
        this.isOpen = true;
      }
    }
  }
};
</script>
<style lang="postcss" scoped>
body {
  font-family: Menlo, Consolas, monospace;
  color: #444;
}
.item {
  cursor: pointer;
}
.bold {
  font-weight: bold;
}
ul {
  padding-left: 1em;
  line-height: 1.8em;
  list-style-type: none;
}
.arrow{
  margin-left: 0.5rem;
}
.add{
  padding-left: 1.3em;
}
</style>
